<template>
  <el-container is-vertical>
    <!-- 左侧图表 -->
    <el-aside class="left-wrapper" width="270px">
      <el-card shadow="never">
        <div @click="shwDeviceNum" class="title-wrapper">
          <div class="chart-title">设备登录数</div>
        </div>
        <div class="content">
          <span :key="index" v-for="(item, index) in deviceNum">{{ item }}</span>
        </div>
        <div @click="shwDeviceNum" class="title-wrapper">
          <div class="chart-title">昨日在透数</div>
        </div>
        <div class="content">
          <span :key="index" v-for="(item, index) in lastDialysis">{{ item }}</span>
        </div>
      </el-card>
      <el-card shadow="never" style="background: transparent">
        <!-- <template v-slot:header>
          <div class="chart-title">透析方式</div>
        </template>
        <template>
          <div class="txstyle-chart-wrapper">
            <v-chart :options="txChart" />
          </div>
        </template>-->
        <!-- <template v-slot:header>
          <div class="chart-title">透析频次</div>
        </template>-->
        <template>
          <div style="height: 320px; width: 100%">
            <v-chart :options="dialysisFrequencyChart" />
          </div>
        </template>
      </el-card>
      <el-card class="zb-card" shadow="never">
        <!-- <template v-slot:header>
          <div class="chart-title">指标合格率</div>
        </template>
        <template>
          <div class="zbstyle-chart-wrapper">
            <v-chart
              :options="ktvChart"
              style="width: 140px; height: 160px; background-color: transparent"
            ></v-chart>
            <v-chart
              :options="urrChart"
              style="width: 140px; height: 160px; background-color: transparent"
            ></v-chart>
          </div>
        </template>-->
        <template>
          <div style="height: 320px; width: 100%">
            <v-chart :options="pieChart" />
          </div>
        </template>
      </el-card>
    </el-aside>
    <!-- 中间地图 + 几块浮动图表 -->
    <el-main class="center-wrapper">
      <div :style="{ height: '820px' }" id="mapChart"></div>
      <!-- 中心患者数据 patient-->
      <div class="patient-wrapper">
        <div class="patient-chart-wrapper">
          <div class="chart-title" style="margin-left: 30px; box-sizing: border-box">患者中心数</div>
          <v-chart :options="patientTotalChart" style="min-height: 160px" />
        </div>
      </div>
    </el-main>
    <!-- 右侧图表 -->
    <el-aside :width="rightWidth" class="right-wrapper">
      <el-card shadow="never">
        <template v-slot:header>
          <div @click="showSj" class="title-wrapper" style="cursor: pointer">
            <div class="chart-title">昨日上机率</div>
          </div>
        </template>
        <template>
          <div class="machine-chart-wrapper">
            <v-chart :options="machineChart"></v-chart>
          </div>
        </template>
      </el-card>
      <el-card shadow="never">
        <template v-slot:header>
          <div @click="showSr" class="title-wrapper" style="cursor: pointer">
            <div class="chart-title">一周总收入</div>
          </div>
        </template>
        <template>
          <div class="income-chart-wrapper">
            <v-chart :options="incomeChart"></v-chart>
          </div>
        </template>
      </el-card>
      <el-card shadow="never">
        <template v-slot:header>
          <div class="header-wrapper">
            <div @click="openDrugModal" class="title-wrapper">
              <div class="chart-title">昨日药品/耗材</div>
            </div>
            <div class="radio-wrapper">
              <el-radio-group @change="onCategoryChange" size="mini" v-model="radioSelected">
                <el-radio-button label="药品"></el-radio-button>
                <el-radio-button label="耗材"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </template>
        <template>
          <div class="income-chart-wrapper">
            <v-chart :options="drugChart" v-if="radioSelected === '药品'"></v-chart>
            <v-chart :options="consumableChart" v-else></v-chart>
          </div>
        </template>
      </el-card>
    </el-aside>
    <!-- 浮动层 图表 -->
    <div class="float-charts">
      <!-- 血管通路 -->
      <!-- <div class="pie-chart-wrapper">
        <v-chart :options="pieChart" />
      </div>-->
      <!-- 原发病 -->
      <!-- <div class="protopathy-chart-wrapper">
        <v-chart :options="rotopathyChart" />
      </div>-->
      <!-- 透析频次 -->
      <!-- <div class="dialysisFrequency-chart-wrapper">
        <v-chart :options="dialysisFrequencyChart" />
      </div>-->
    </div>
    <!-- 昨日新增数，退出数 -->
    <div class="bottom-charts">
      <el-card shadow="never">
        <div @click="showImg" class="title-wrapper">
          <div class="chart-title">昨日新增数</div>
        </div>
        <div class="content">
          <span :key="index" v-for="(item, index) in lastAdd">{{ item }}</span>
        </div>
      </el-card>
      <el-card shadow="never">
        <div @click="showImg" class="title-wrapper">
          <div class="chart-title">昨日退出数</div>
        </div>
        <div class="content">
          <span :key="index" v-for="(item, index) in lastExit">{{ item }}</span>
        </div>
      </el-card>
    </div>
    <!-- 二级图表 模态框 -->
    <!-- <el-dialog
      title="总收入"
      :visible.sync="showDrugModal"
      width="60%"
      :before-close="handleClose"
    >
      <div class="sub-chart-wrapper">
        <div>
          <v-chart :options="subDrugChart1"></v-chart>
        </div>
        <div>
          <v-chart :options="subDrugChart2"></v-chart>
        </div>
      </div>
    </el-dialog>-->
    <!-- 药品、耗材 二级页面弹出框 -->
    <el-dialog :before-close="handleClose" :visible.sync="showDrugModal" width="60%">
      <template v-slot:title>
        <div class="chart-header">
          <div class="header-left">
            <span class="title">药品/耗材</span>
            <div class="radio-wrapper">
              <el-radio-group @change="onSortTrendChange" size="mini" v-model="sortSelected">
                <el-radio-button label="统计"></el-radio-button>
                <el-radio-button label="趋势"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="header-right">
            <el-tabs @tab-click="timeLineClick" v-model="activeName">
              <el-tab-pane label="月度" name="month">月度</el-tab-pane>
              <el-tab-pane label="季度" name="quarterly">季度</el-tab-pane>
              <el-tab-pane label="年度" name="year">年度</el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </template>
      <template>
        <div class="sub-chart-wrapper">
          <div class="drug">
            <v-chart :options="subDrugChart1"></v-chart>
          </div>
          <div class="consumables">
            <div>
              <consumables-chart :seriesData="consumablesSeries" :totalType="activeName" :xData="consumablesX" :yData="consumablesY" ref="subChart" />
            </div>
          </div>
        </div>
      </template>
    </el-dialog>
    <el-dialog :before-close="handleClose1" :visible.sync="showImg1Modal" width="60%">
      <img alt src="../../../assets/images/中心1.png" />
    </el-dialog>
    <el-dialog :before-close="handleClose2" :visible.sync="showImg2Modal" title="一周上机率" width="60%">
      <!-- <img src="../../../assets/images/一周上机.png" alt="" /> -->
      <boarding-rate />
    </el-dialog>

    <el-dialog :before-close="handleClose3" :visible.sync="showImg3Modal" width="60%">
      <img alt src="../../../assets/images/收入.png" />
    </el-dialog>
    <el-dialog :before-close="handleClose4" :visible.sync="showImg4Modal" width="60%">
      <img alt src="../../../assets/images/设备分布.png" />
    </el-dialog>
  </el-container>
</template>

<script>
import ConsumablesChart from './Consumables'
import BoardingRate from './BoardingRate'
import chinaMapData from '../../../../public/china.json'
// import { getChinaJsonData } from '@/api/home.js'
// import city from 'echarts/map/json/china-cities.json'
import axios from '@/utils/request'
const screenWidth = document.documentElement.clientWidth

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    ConsumablesChart,
    BoardingRate,
  },
  data() {
    // 这里存放数据
    return {
      // 登录设备数
      deviceNum: [0, 0, 0],
      // 昨日在透数
      lastDialysis: [0, 0, 0],
      // 昨日新增数
      lastAdd: [],
      // 昨日退出数
      lastExit: [],
      // 透析方式图表配置项
      txChart: {},
      // 指标合格率 ktv
      ktvChart: {},
      urrChart: {},
      // 昨日上机数
      machineChart: {},
      // 昨日总收入
      incomeChart: {},
      // 昨日药品
      drugChart: {},
      // 昨日耗材
      consumableChart: {},
      // 二级药品/耗材图表
      subDrugChart1: {},
      subDrugChart2: {},
      consumablesChart1: {},
      consumablesChart2: {},
      consumablesChart3: {},
      consumablesChart4: {},
      radioSelected: '药品',
      sortSelected: '统计',
      // rightWidth: '0',
      // 血管通路
      pieChart: {},
      // 原发病
      rotopathyChart: {},
      // 透析频次
      dialysisFrequencyChart: {},
      showDrugModal: false,
      // 月度，季度，年度，默认第一个
      activeName: 'year',
      consumablesX: [15, 29, 44, 79],
      consumablesY: ['费森', '金宝', '贝朗', '尼普洛'],
      consumablesSeries: [15, 44, 58, 79],
      showImg1Modal: false,
      showImg2Modal: false,
      showImg3Modal: false,
      showImg4Modal: false,
      // 中心患者数
      patientTotalChart: {},
    }
  },
  // 监听属性 类似于data概念
  computed: {
    // 根据显示屏幕宽度动态设置地图显示比例
    mapSize() {
      // const screenWidth = document.documentElement.clientWidth
      if (screenWidth <= 1400) {
        return 110
      }
      if (screenWidth > 1400 && screenWidth <= 1500) {
        return 100
      }
      return 132
    },
    rightWidth() {
      if (screenWidth <= 1400) {
        return '300px'
      }
      // if (screenWidth > 1400 && screenWidth <= 1500) {
      return '380px'
      // }
    },

    // 设置销售排行显示位置
    // setGrid () {
    //   if (screenWidth <= 1500) {
    //     return {
    //       height: '100px',
    //       right: '3%',
    //       top: '44%',
    //       bottom: '32%',
    //       width: '10%'
    //     }
    //   }
    //   return {
    //     height: '100px',
    //     right: '10px',
    //     top: '45%',
    //     bottom: '40%',
    //     width: '16%'
    //   }
    // },
    // setTitle () {
    //   if (screenWidth <= 1500) {
    //     return [
    //       {
    //         show: true,
    //         text: '2021年度患者分布排行',
    //         textStyle: {
    //           color: '#333',
    //           fontSize: 15
    //         },
    //         right: 40,
    //         top: 330
    //       }
    //     ]
    //   }
    //   return [
    //     {
    //       show: true,
    //       text: '2021年度患者分布排行',
    //       textStyle: {
    //         color: '#333',
    //         fontSize: 18
    //       },
    //       right: 80,
    //       top: 330
    //     }
    //   ]
    // }
  },
  // 监控data中的数据变化

  // 方法集合
  methods: {
    // 登录设备数
    initDeviceNum() {
      axios
        .get('/api/hq/dashboard/device/sum/total')
        .then((res) => {
          // console.log('设备数据', res)
          this.deviceNum = res
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 昨日在透数
    initOnBoardNum() {
      axios
        .get('/api/hq/dashboard/pre/hd/total')
        .then((res) => {
          // console.log('上机数据', res)
          this.lastDialysis = res
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 昨日新增、退出数
    initAddQuitCount() {
      axios
        .get('/api/hq/dashboard/pre/new/patient/total')
        .then((res) => {
          this.lastAdd = res
        })
        .catch((err) => {
          console.log(err)
        })
      axios
        .get('/api/hq/dashboard/pre/outcome/patient/total')
        .then((res) => {
          this.lastExit = res
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 地图初始化
    initMap() {
      axios
        .get('/api/hq/dashboard/region/patient/total')
        .then((res) => {
          const xData = []
          const yData = []
          this.$echarts.registerMap('china', chinaMapData)
          const chartDom = document.getElementById('mapChart')
          const chart = this.$echarts.init(chartDom)
          const _regions = []
          res = res.sort((a, b) => {
            return b.total - a.total
          })
          res.map((item) => {
            xData.push(item.hospitalName)
            yData.push(item.total)
            _regions.push({
              name: item.provinceRegionName.slice(0, 2),
              label: {
                show: true,
              },
              itemStyle: {
                normal: {
                  backgroundColor: '#fff',
                  areaColor: '#A0CEFC',
                },
              },
            })
            _regions.push({
              name: '南海诸岛',
              value: 0,
              itemStyle: {
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                  },
                },
              },
            })
          })
          chart.setOption({
            backgroundColor: 'transparent',
            // title: this.setTitle,
            // grid: this.setGrid,
            tooltip: {
              show: false,
              trigger: 'item',
              backgroundColor: '#F7FAFC',
              showDelay: 0,
              hideDelay: 0,
              enterable: false,
              transitionDuration: 0,
            },
            label: { show: false },
            xAxis: {
              show: false,
            },
            yAxis: {
              type: 'category',
              // nameGap: 16,
              inverse: true,
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#455B77',
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                textStyle: {
                  color: '#333',
                },
              },
              data: [],
            },
            geo: {
              map: 'china',
              roam: false,
              aspectScale: 0.8,
              layoutCenter: ['50%', '50%'],
              layoutSize: '130%',
              label: {
                normal: {
                  show: false,
                  color: '#000', // 省份标签字体颜色
                },
                emphasis: {
                  show: true,
                  color: '#333', // 鼠标滑过地图后当前区域显示的省份颜色 '#f75a00'
                },
              },
              itemStyle: {
                // 图形上的地图区域
                normal: {
                  areaColor: '#CDE5FD', // CDE5FD
                  borderColor: 'rgba(0,0,0,0.2)',
                },
                emphasis: {
                  // borderColor: '#aed6f2',// '#0066ba',
                  areaColor: '#aed6f2',
                  color: '#333',
                  // shadowColor: 'rgba(0,0,0,0.4)',
                  // shadowBlur: 10
                },
              },
              regions: _regions,
            },
            visualMap: {
              show: false,
              left: '3%',
              bottom: '5%',
              calculable: true,
              seriesIndex: [0],
              showLabel: true,
              // 数据颜色范围，值越大颜色越深
              inRange: {
                color: ['#CDE5FD', '#8AC3FB', '#63AEFC'],
              },
              textStyle: {
                color: '#CDE5FD',
              },
            },
            series: [
              {
                name: '患者分布',
                type: 'map',
                backgroundColor: '#F7FAFC',
                borderColor: '#3096C7',
                borderWidth: 1.5,
                geoIndex: 0,
                zoom: 1.2,
                data: res.map((item) => {
                  // console.log(111, item)
                  return {
                    name: item.hospitalName,
                    value: [parseFloat(item.longitude), parseFloat(item.latitude)],
                    itemStyle: {
                      normal: {
                        areaColor: '#f00',
                        color: '#ff7474',
                        shadowBlur: 0,
                        shadowOffsetX: 0,
                      },
                    },
                  }
                }),
                zlevel: 1,
              },
              {
                name: 'china',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'image://' + require('@/assets/images/ic_position.png'),
                symbolSize: 75,
                label: {
                  position: 'center',
                  normal: {
                    show: true,
                    // position: 'center',
                    formatter: (v) => {
                      return v.name + '\n' + v.value[2]
                    },
                    lineHeight: 16,
                    // backgroundColor: 'rgba(255,255,255,.9)',
                    // borderRadius: '#80cffd',
                    // borderWidth: '1',
                    padding: [2, 3, 1, 2],
                    color: '#333',
                    fontSize: 12,
                    fontWeight: 'bold',
                    fontFamily: '微软雅黑',
                  },
                },
                data: res.map((item) => {
                  // console.log(111, item)
                  return {
                    name: item.hospitalName,
                    value: [parseFloat(item.longitude), parseFloat(item.latitude), item.total],
                    itemStyle: {
                      normal: {
                        areaColor: '#f00',
                      },
                    },
                  }
                }),
              },
            ],
          })
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 透析方式分布
    initTXChart() {
      axios
        .get('api/hq/dashboard/hd/dialysis/mode/distribution')
        .then((res) => {
          const dashedPic =
            ''
          const color = ['#FF8700', '#ffc300', '#00e473', '#009DFF']
          const chartData = []
          res = res.slice(3, 7)
          res.map((item) => {
            chartData.push({
              name: item.dialysisMode,
              value: item.ratio,
              unit: '元',
              percent: item.percentage,
            })
          })
          const arrName = []
          const arrValue = []
          let sum = 0
          const pieSeries = []
          const lineYAxis = []

          // 数据处理
          chartData.forEach((v, i) => {
            arrName.push(v.name)
            arrValue.push(v.value)
            sum = sum + v.value
          })

          // 图表option整理
          chartData.forEach((v, i) => {
            pieSeries.push({
              name: '',
              type: 'pie',
              clockWise: false,
              hoverAnimation: false,
              radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
              center: ['32%', '50%'],
              label: {
                show: false,
              },
              data: [
                {
                  value: v.value,
                  name: v.name,
                },
                {
                  value: sum - v.value,
                  name: '',
                  itemStyle: {
                    color: 'rgba(0,0,0,0)',
                  },
                },
              ],
            })
            pieSeries.push({
              name: '',
              type: 'pie',
              silent: true,
              z: 0,
              clockWise: false, // 顺时加载
              hoverAnimation: false, // 鼠标移入变大
              radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
              center: ['32%', '50%'],
              label: {
                show: false,
              },
              data: [
                {
                  value: v.value, // 7.5,
                  itemStyle: {
                    color: '#E3F0FF',
                  },
                },
              ],
            })
            v.percent = ((v.value / sum) * 100).toFixed(1) + '%'
            lineYAxis.push({
              value: i,
              textStyle: {
                rich: {
                  circle: {
                    color: color[i],
                    padding: [5, 15],
                  },
                },
              },
            })
          })

          this.txChart = {
            backgroundColor: 'transparent',
            color,
            grid: {
              top: '10%',
              bottom: '54%',
              left: '30%',
              containLabel: false,
            },
            yAxis: [
              {
                type: 'category',
                inverse: true,
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  backgroundColor: 'transparent',
                  show: true,
                  formatter(params) {
                    const item = chartData[params]
                    return '{line|}{circle|●}{name|' + item.name + '}{bd||}{percent|' + item.percent + '}'
                  },
                  // interval: 'auto',
                  inside: true,
                  textStyle: {
                    color: '#888',
                    fontSize: 12,
                    // height: '20px',
                    rich: {
                      line: {
                        width: 40,
                        // height: 15,
                        backgroundColor: { image: dashedPic },
                      },
                      name: {
                        color: '#666',
                        fontSize: 12,
                      },
                      bd: {
                        color: '#ccc',
                        padding: [0, 1, 0, 0],
                        fontSize: 12,
                      },
                      percent: {
                        color: '#333',
                        fontSize: 12,
                      },
                      value: {
                        color: '#333',
                        fontSize: 12,
                        fontWeight: 500,
                        padding: [5, 0, 5, 30],
                      },
                      unit: {
                        fontSize: 12,
                      },
                    },
                  },
                },
                data: lineYAxis,
              },
            ],
            xAxis: [
              {
                show: false,
              },
            ],
            series: pieSeries,
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 指标合格率
    initKtvChart() {
      axios
        .get('/api/hq/dashboard/all/sp/kt/v/qualify/rate')
        .then((res) => {
          const _color = [
            // 改变这个地方可以修改进度
            [res, '#6d76c9'],
            [1, '#dfe6ec'],
          ]
          this.ktvChart = {
            backgroundColor: 'transparent',
            grid: {
              top: '5%',
            },
            series: [
              {
                name: '业务指标',
                type: 'gauge',
                min: 0,
                max: 100,
                pointer: { show: false },
                itemStyle: {
                  normal: {
                    color: '#323232',
                  },
                },
                splitLine: { show: false },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  color: '#333',
                  show: false,
                  fontSize: 12,
                  distance: -20,
                  formatter: (v) => {
                    if (v === 0 || v === 100) return v
                  },
                },
                axisLine: {
                  lineStyle: {
                    width: 8,
                    color: _color,
                  },
                },
                detail: {
                  formatter(e) {
                    return 'Kt/v 合格率'
                  },
                  color: '#333',
                  fontSize: 13,
                  offsetCenter: [0, 55],
                  borderRadius: 8,
                },
                title: {
                  offsetCenter: [0, 0],
                  color: '#333',
                  fontSize: 20,
                  fontWeight: 500,
                  rich: {
                    a: {
                      fontWeight: 'normal',
                      fontSize: 15,
                      color: '#FFF',
                      padding: [0, 0, 10, 20],
                    },
                  },
                },
                data: [
                  {
                    name: `${res}%`,
                    value: res,
                  },
                ],
              },
            ],
          }
        })
        .catch((err) => {
          console.log(err)
        })
      axios
        .get('/api/hq/dashboard/all/sp/kt/v/qualify/rate')
        .then((res) => {})
        .catch((err) => {
          console.log(err)
        })
    },
    // 昨日上机数
    initMachineChart() {
      const dataY = []
      const dataX = []
      axios
        .get('/api/hq/dashboard/region/pre/hd/device/use/ratio?today=2021-02-23')
        .then((res) => {
          res.map((item) => {
            dataX.push(item.hospitalName)
            dataY.push(item.deviceUsageRatio.toFixed(2))
          })
          this.machineChart = {
            backgroundColor: '#fff',
            grid: {
              left: '30px',
              top: '40px',
              bottom: '20px',
              right: '0%',
            },
            tooltip: {
              trigger: 'axis',
              formatter: (params) => {
                let result = ''
                params.forEach((item) => {
                  const markerHtml = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background: linear-gradient(360deg, ${item.color.colorStops[1].color} 0%, ${item.color.colorStops[0].color} 100%);"></span>`
                  result += `${item.axisValue}<br>${markerHtml}${item.data}%`
                })
                return result
              },
            },
            xAxis: {
              data: dataX, // ['2017', '2018', '2019', '2020'],
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#D1D1D1',
                  width: 0.5, // 这里是为了突出显示加上的
                },
              },
              axisLabel: {
                textStyle: {
                  color: '#555', // '#8998AC',
                  fontSize: 12,
                },
              },
            },
            yAxis: [
              {
                name: '单位(%)', // 单位(个)
                nameTextStyle: {
                  color: '#8998AC',
                  padding: [0, 0, 0, 4],
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                axisLabel: {
                  textStyle: {
                    color: '#999',
                    fontSize: 12,
                  },
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    width: 2,
                    color: '#f4f5f8', // 'rgb(245,245,245)' x轴网络线颜色
                  },
                },
              },
            ],
            series: [
              {
                type: 'pictorialBar',
                barCategoryGap: '0%',
                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                barWidth: '65%',
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#4D7CFE',
                        },
                        {
                          offset: 1,
                          color: '#51C0F8',
                        },
                      ],
                      global: false, //  缺省为  false
                    },
                  },
                  emphasis: {
                    opacity: 1,
                  },
                },
                data: dataY,
                z: 10,
              },
            ],
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 一周总收入
    initTotalIncome() {
      axios
        .get('/api/hq/dashboard/weekday/device/total/income?startdate=2021-02-23')
        .then((res) => {
          const dataX = []
          const dataY = []
          const dataY2 = []
          // 组装总收入数据
          if (res) {
            // res = res.filter(item => item.incomeType === 0)
            res.sumItems.map((item) => {
              dataX.push(item.weekName)
              dataY.push(item.totalIncome)
            })
            // 组装单机收入数据
            // res = res.filter(item => item.incomeType === 1)
            res.singleItems.map((item) => {
              dataY2.push(item.totalIncome)
            })

            this.incomeChart = {
              grid: {
                left: '40px',
                top: 35,
                bottom: 20,
                right: '12%',
              },
              // legend: {
              //   data: ['总收入', '单机收入']
              // },
              tooltip: {
                trigger: 'axis',
                formatter: (params) => {
                  let str = params[0].name + '<br/>'
                  params.forEach((item, index) => {
                    const unit = index === 0 ? '万元' : '元'
                    str += item.marker + item.seriesName + ': ' + parseFloat(item.data).toFixed(2) + unit + '<br/>'
                  })
                  return str
                },
              },
              xAxis: {
                type: 'category',
                data: dataX, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                boundaryGap: false,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#D1D1D1',
                    width: 0.5, // 这里是为了突出显示加上的
                  },
                },
                axisLabel: {
                  textStyle: {
                    color: '#555',
                    fontSize: 12,
                  },
                },
              },
              yAxis: [
                {
                  type: 'value',
                  name: '总收入/万',
                  axisTick: {
                    show: false,
                  },
                  axisLine: {
                    show: false,
                    lineStyle: {
                      color: '#D1D1D1',
                      width: 0.5, // 这里是为了突出显示加上的
                    },
                  },
                  axisLabel: {
                    textStyle: {
                      color: '#999',
                      fontSize: 12,
                    },
                  },
                  nameTextStyle: {
                    color: '#8998AC',
                    padding: [0, 0, 0, 0],
                  },
                  splitLine: {
                    show: true,
                    lineStyle: {
                      width: 2,
                      color: '#f4f5f8', // 'rgb(245,245,245)' x轴网络线颜色
                    },
                  },
                },
                {
                  type: 'value',
                  name: '单机收入/元',
                  splitLine: { show: false },
                  axisTick: {
                    show: false,
                  },
                  axisLine: {
                    show: false,
                  },
                  axisLabel: {
                    textStyle: {
                      color: '#f08519',
                      fontSize: 12,
                    },
                  },
                  nameTextStyle: {
                    color: '#f08519',
                    padding: [0, 0, 0, 0],
                  },
                },
              ],
              series: [
                {
                  data: dataY, // [80, 130, 54, 199, 110, 246, 288],
                  type: 'line',
                  name: '总收入',
                  symbol: 'circle', // 设置线图点为实心，重要
                  lineStyle: {
                    width: 2,
                    color: '#3e65da',
                  },
                  areaStyle: {
                    color: '#f4f7fe',
                    // type: 'default',
                    // color: new this.$echarts.graphic.LinearGradient(
                    //   0, 0, 0, 1,
                    //   [
                    //     { offset: 0, color: 'rgb(91,126,225)' },
                    //     { offset: 0.5, color: 'rgba(197, 211, 255, 0.83)' },
                    //     { offset: 1, color: 'rgba(239, 243, 255, 0)' }
                    //   ]
                    // )
                  },
                  itemStyle: {
                    opacity: 0,
                    width: 1,
                    color: '#3e65da',
                  },
                  smooth: true,
                  yAxisIndex: 0, // 重要，双轴必须指定，0 代表归左侧Y轴
                },
                {
                  data: dataY2, // [80, 130, 54, 199, 110, 246, 288],
                  type: 'line',
                  name: '单机收入',
                  symbol: 'circle', // 设置线图点为实心，重要

                  lineStyle: {
                    width: 2,
                    color: '#f08519',
                  },
                  // areaStyle: {
                  //   // color: new this.$echarts.graphic.LinearGradient(
                  //   //   0, 0, 0, 1,
                  //   //   [
                  //   //     { offset: 0, color: 'rgb(229,139,54)' },
                  //   //     { offset: 0.5, color: 'rgba(255, 220, 174, 1)' },
                  //   //     { offset: 1, color: 'rgba(255, 248, 239, 0)' }
                  //   //   ]
                  //   // )
                  //   // color:'#f4f7fe'
                  //   // color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                  //   //   offset: 0,
                  //   //   color: '#d68262'
                  //   // }, {
                  //   //   offset: 1,
                  //   //   color: '#ffe'
                  //   // }])
                  // },
                  itemStyle: {
                    width: 2,
                    color: '#f08519',
                  },
                  smooth: true,
                  yAxisIndex: 1, // 重要，双轴必须指定，1 代表归右侧Y轴
                },
              ],
            }
          }
        })
        .catch((err) => {
          console.log(222, err)
        })
    },
    // 药品
    initDrugChart() {
      // 药品
      axios
        .get('/api/hq/dashboard/pre/medicine/total/dose?startDate=2021-02-23')
        .then((res) => {
          // const xData = []
          // const yData = []
          const _data = {
            xData: [],
            yData: [],
            res: [],
          }
          res = res
            // .filter(item => item.sumDose < 1000)
            .map((item) => {
              _data.xData.push(item.platformMedicineName)
              _data.yData.push({
                value: item.sumDose,
                desc: item,
              })
              _data.res.push(item)
            })

          this.drugChart = {
            xAxis: {
              type: 'category',
              data: _data.xData,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#D1D1D1',
                  width: 0.5, // 这里是为了突出显示加上的
                },
              },
              axisLabel: {
                interval: 0,
                rotate: 30,
                textStyle: {
                  color: '#333',
                  fontSize: 12,
                },
              },
            },
            yAxis: {
              type: 'value',
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  color: '#999',
                  fontSize: 12,
                },
              },
              nameTextStyle: {
                color: '#8998AC',
                padding: [0, 25, 0, 0],
              },
              splitLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  color: '#f4f5f8', // 'rgb(245,245,245)' x轴网络线颜色
                },
              },
            },
            tooltip: {
              trigger: 'item',
              formatter: (v) => {
                return `${v.data.desc.platformMedicineName}:<br/> ${v.data.desc.doseUnit}`
              },
            },
            grid: {
              top: '20px',
              bottom: '65px',
              left: '50px',
              right: '0',
            },
            series: [
              {
                data: _data.yData,
                type: 'bar',
                showBackground: false,
                barWidth: 26,
                // backgroundStyle: {
                //   color: 'rgba(220, 220, 220, 0.8)'
                // }
                itemStyle: {
                  normal: {
                    color(params) {
                      const colors = ['#ee6666', '#5470c6', '#fac858', '#91cc75', '#37A1DA', '#31C5E9']
                      return colors[params.dataIndex]
                    },
                  },
                },
              },
            ],
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 耗材
    initConsumableChart() {
      // 药品
      axios
        .get('/api/hq/dashboard/pre/material/total/qty?startDate=2021-02-23')
        .then((res) => {
          console.log(222, res)
          const _data = {
            xData: [],
            yData: [],
            res: [],
          }
          res = res.map((item) => {
            _data.xData.push(item.platformMaterial)
            _data.yData.push({
              value: item.sumQty,
            })
          })

          this.consumableChart = {
            xAxis: {
              type: 'category',
              data: _data.xData,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#D1D1D1',
                  width: 0.5, // 这里是为了突出显示加上的
                },
              },
              axisLabel: {
                interval: 0,
                rotate: 30,
                textStyle: {
                  color: '#555',
                  fontSize: 10,
                },
              },
            },
            yAxis: {
              type: 'value',
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  color: '#999',
                  fontSize: 12,
                },
              },
              nameTextStyle: {
                color: '#8998AC',
                padding: [0, 25, 0, 0],
              },
            },
            tooltip: {
              trigger: 'item',
              formatter: (v) => {
                console.log(v)
                return `${v.name}:<br/>  ${v.value}次`
              },
            },
            grid: {
              top: '20px',
              bottom: '65px',
              left: '60px',
              right: '20px',
            },
            series: [
              {
                data: _data.yData,
                type: 'bar',
                showBackground: false,
                barWidth: 26,
                // backgroundStyle: {
                //   color: 'rgba(220, 220, 220, 0.8)'
                // }
                itemStyle: {
                  normal: {
                    color(params) {
                      const colors = ['#F14C4C', '#3B74E6', '#F18F1C', '#54A95D', '#37A1DA', '#31C5E9']
                      return colors[params.dataIndex]
                    },
                  },
                },
              },
            ],
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 血管通路分布
    initPieChart() {
      const _data = []
      axios
        .get('/api/hq/dashboard/vascular/Access/total/ratio')
        .then((res) => {
          const colors = ['#78CFF2', '#46B9BE', '#FFEC88', '#D16484', '#F49E59']
          res.map((item, index) => {
            _data.push({ name: item.platformVascularAccess, value: item.totalQty, itemStyle: { color: colors[index] } })
          })

          this.pieChart = {
            title: {
              text: '血管通路分布',
              left: '0px',
              top: '50px',
              textStyle: {
                color: '#666',
                fontSize: 16,
                fontWeight: '700',
              },
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: ({d}%)',
            },
            grid: {
              top: '60px',
              left: '0px',
              right: '0%',
              bottom: '0%',
              containLabel: true,
            },
            // label: {
            //   formatter: '{b|{b}}',
            //   rich: {
            //     b: {
            //       color: '#000',
            //       fontSize: 12,
            //       lineHeight: 33
            //     },
            //     per: {
            //       color: '#eee',
            //       backgroundColor: '#345', // '#4291e2',
            //       padding: [2, 4],
            //       borderRadius: 2
            //     }
            //   }
            // },
            series: [
              {
                name: '血管通路分布',
                type: 'pie',
                radius: ['35%', '55%'],
                width: '200px',
                // itemStyle: {
                //   label: {
                //     formatter: '{c} \n\n',
                //     padding: [0, -155],
                //     alignTo: 'labelLine'
                //   }
                // },
                data: _data,
              },
            ],
          }
        })
        .catch((err) => {
          console.log(222, err)
        })
    },
    // 原发病
    initProtopathy() {
      axios
        .get('api/hq/dashboard/hd/primary/disease/distribution')
        .then((res) => {
          const dataX = []
          const dataY = []
          res = res
            .sort((a, b) => {
              return b.value - a.value
            })
            .slice(0, 8)
            .map((item) => {
              dataX.push(item.platformPrimaryDisease)
              dataY.push(item.total)
            })
          this.rotopathyChart = {
            title: {
              text: '原发病',
              left: '100px',
              top: '20px',
              textStyle: {
                color: '#666',
                fontSize: 16,
                fontWeight: '700',
              },
            },
            // label: { show: true },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
              },
              formatter: (v) => {
                return `${v[0].name} : ${v[0].value} 人`
              },
            },
            legend: { show: false },
            grid: {
              top: '60px',
              left: '90px',
              right: '10%',
              bottom: '0%',
              containLabel: true,
            },
            xAxis: {
              type: 'value',
              show: false,
              // boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: 'category',
              splitLine: {
                show: false,
              },
              axisLabel: {},
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              inverse: true,
              data: dataX, // ['巴西', '印尼', '美国', '印度', '中国', '总数(万)']
            },
            series: [
              {
                name: '',
                type: 'bar',
                barWidth: '25px',
                label: {
                  normal: {
                    show: true,
                    fontSize: 12,
                  },
                },
                // barHeight: '100px',
                itemStyle: {
                  label: { show: true },
                  normal: {
                    color: (params) => {
                      if (params.dataIndex === 0) return '#FF7474'
                      else if (params.dataIndex === 1) return '#F6DE54'
                      else if (params.dataIndex === 2) return '#22e089'
                      return '#57c3ff'
                    },
                  },
                  // padding: [0, 4, 0, 5]
                },
                barMinHeight: 80,
                data: dataY, // [18203, 23489, 29034, 104970, 131744, 630230]
              },
            ],
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 透析频次
    initDialysisFrequency() {
      axios
        .get('/api/hq/dashboard/hd/frequency/distribution')
        .then((res) => {
          const _data = []
          // const _colors = ['#9CE4B7', '#7ED3F4', '#9fe080', '#FFDC60', '#5C7BD9', '#EE6666']
          res = res.reverse().map((item, index) => {
            _data.push({
              name: item.frequency,
              value: Math.floor(100 / res.length) * (index + 1),
              total: item.total,
              ratio: item.ratio,
              percent: item.percent,
            })
          })
          this.dialysisFrequencyChart = {
            backgroundColor: 'transparent',
            color: ['#4DCBE9', '#98D7C9', '#F6DE54', '#9fe080', '#FFDC60', '#5C7BD9'],
            title: {
              text: '透析频次',
              left: '0px',
              top: '5px',
              bottom: '10px',
              textStyle: {
                color: '#666',
                fontSize: 16,
                fontWeight: '700',
              },
            },
            grid: {
              top: 0,
              left: 0,
              bottom: 0,
            },
            tooltip: {
              trigger: 'item',
              formatter: (v) => {
                return `${v.data.name}</br> 共:${v.data.total}人<br/>占比:(${v.data.percent})`
              },
            },
            series: [
              {
                name: '透析频次',
                type: 'funnel',
                left: 0,
                // top: '80px',
                // bottom: '20px',
                width: '200px',
                // height: '200px',
                // label: {
                //   normal: {
                //     color: '#000'
                //   }
                // },
                labelLine: {
                  show: false,
                },
                // itemStyle: { opacity: 0.7 },
                data: _data,
              },
            ],
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 各医院药品趋势图（二级页面）
    initSubDrugChart(res) {
      const _res = {
        xData: [],
        _legendData: [],
      }
      const color = ['#2db7f5', '#ff6600', '#808bc6', '#ec868f'] // D48265  #41dfd8
      const areaColor = ['#d5f0fd', '#fff5e6', '#dcdfee', '#D48265']
      const _series = []
      if (res && res.length) {
        // const names = []
        // 取X轴文本名称显示
        res[0].items.forEach((item) => {
          _res.xData.push(item.hospitalName)
        })
        // 取 legend文本
        res.forEach((item) => {
          _res._legendData.push(item.platformMedicineName)
        })
        // 取线图数据
        res.map((v, i) => {
          var _d = []
          v.items.map((item) => {
            _d.push(item.totalDose)
          })

          _series[i] = {
            name: v.platformMedicineName,
            type: 'line',
            areaStyle: { type: 'default', color: areaColor[i] },
            lineStyle: {
              color: color[i],
            },
            data: _d,
            smooth: true,
          }
        })
      }

      this.subDrugChart1 = {
        title: {
          text: '药品使用',
          y: '4%',
          textStyle: {
            color: '#666',
          },
        },
        grid: {
          top: '10%',
          left: '15%',
          right: '3%',
          bottom: '100px',
        },
        legend: {
          x: 'left',
          orient: 'vertical',
          width: 150,
          top: 60,
          icon: 'rect',
          data: _res._legendData,
        },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          axisTick: { show: false },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dotted',
            },
          },
          axisLine: {
            show: true,
            lineStyle: { color: '#eee' },
          },
          boundaryGap: false,
          axisLabel: {
            // 文字垂直展示
            show: true,
            textStyle: {
              color: '#777',
              fontSize: 14,
            },
            formatter: (v) => {
              return v.split('').join('\n')
            },
          },
          data: _res.xData, // ['攀钢长寿', '十七冶', '鞍钢总院', '阳煤总院', '西电医院', '成都五冶', '攀钢密地', '中铁西安', '十九冶', '中铁芜湖', '烟台海港', '邯郸岭北', '阳煤三院', '中铁华洲']
        },
        yAxis: {
          type: 'value',
          // scale: true,
          // max: 100,
          // min: 0,
          splitNumber: 5,
          axisTick: { show: false },
          splitLine: { show: false },
          axisLine: {
            show: true,
            lineStyle: { color: '#eee' },
          },
          axisLabel: {
            textStyle: {
              color: '#666',
            },
          },
          // boundaryGap: ['1', '1']
        },
        series: _series,
      }

      this.consumablesChart2 = {
        title: {
          text: '耗材使用',
          x: '50%',
          y: '12%',
          textStyle: {
            fontSize: 12,
            color: '#777',
          },
        },
        tooltip: {
          trigger: 'axis',
          formatter: 'Temperature : <br/>{b}km : {c}°C',
        },
        grid: {
          top: '80px',
          left: '13%',
          right: '4%',
          bottom: '15%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          data: [15, 29, 44, 79],
          // axisLabel: {
          //   formatter: '{value}'
          // }
        },
        yAxis: {
          type: 'category',
          axisLine: { onZero: false },
          axisLabel: {
            formatter: '{value}',
          },
          boundaryGap: true,
          data: ['费森', '金宝', '贝朗', '尼普洛'],
        },
        series: [
          {
            name: '',
            type: 'line',
            symbolSize: 10,
            symbol: 'circle',
            smooth: true,
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(0,0,0,0.3)',
              shadowBlur: 10,
              shadowOffsetY: 8,
            },
            data: [15, 44, 58, 79],
          },
        ],
      }
    },
    // 各医院耗材趋势图（二级页面）
    initConsumablesChart() {},
    // 中心患者数
    initPatientTotalChart() {
      axios
        .get('/api/hq/dashboard/org/patient/summary')
        .then((res) => {
          const yData1 = []
          const yData2 = []
          const xData = []
          res.map((item) => {
            xData.push(item.hospitalName)
            yData1.push(item.patientTotal)
            yData2.push(item.overflowTotal)
          })
          this.patientTotalChart = {
            // title: {
            //   text: '患者中心数',
            //   left: '10px',
            //   bottom: '150px',
            //   textStyle: {
            //     color: '#666',
            //     fontSize: 16,
            //     fontWeight: '700'
            //   }
            // },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
              },
              formatter: (v) => {
                let str = `${v[0].name}<br/>`
                v.forEach((item) => {
                  str += `${item.marker} ${item.seriesName}：${item.value}人<br/>`
                })
                return str
              },
            },
            legend: {
              data: ['按设备数2班满员数', '溢/缺数'],
              top: '8%',
            },
            grid: {
              left: '3%',
              // top: '5%',
              right: '16%',
              bottom: '3%',
              containLabel: true,
            },
            xAxis: [
              {
                type: 'value',
                inverse: true,
                axisTick: { show: false },
                axisLabel: { show: false },
                axisLine: { show: false },
                splitLine: {
                  show: false,
                },
              },
            ],
            yAxis: [
              {
                type: 'category',
                axisTick: {
                  show: false,
                },

                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#fdd100', // 45b5fff
                  },
                },
                axisLabel: {
                  textStyle: {
                    color: '#333',
                  },
                },
                splitLine: {
                  show: false,
                },
                data: xData, // ['西电医院', '西电医院', '成都五冶', '攀钢密地', '中铁西安', '十九冶', '中铁芜湖', '烟台海港']
              },
            ],
            series: [
              {
                name: '按设备数2班满员数',
                type: 'bar',
                stack: '总量',
                label: {
                  show: true,
                  formatter: (v) => {
                    return `${v.value}`
                  },
                },
                itemStyle: {
                  normal: {
                    color: '#45b5ff',
                  },
                },
                // barCategoryGap: '10%',
                barWidth: 20,
                barMinHeight: 150,
                // barGap: '5%',
                emphasis: {
                  focus: 'series',
                },
                data: yData1, // [320, 323, 302, 341, 374, 390, 450, 420]
              },
              {
                name: '溢/缺数',
                type: 'bar',
                stack: '总量',
                label: {
                  show: true,
                  position: 'right',
                  color: '#888',
                  formatter: (v) => {
                    return `${v.value}`
                  },
                },
                itemStyle: {
                  normal: {
                    color: '#fdd100',
                  },
                },
                barWidth: 20,
                barMinHeight: 30,
                // barMaxHeight: 50,
                // barCategoryGap: '50%',
                emphasis: {
                  focus: 'series',
                },
                data: yData2, // [-120, -132, -35, -101, -134, -190, -230, -210]
              },
            ],
            // tooltip: {
            //   trigger: 'axis',
            //   axisPointer: { // 坐标轴指示器，坐标轴触发有效
            //     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            //   }
            // },
            // legend: {
            //   data: ['溢/缺数', '按设备数2班满员数'],
            //   top: '30px'
            // },
            // grid: {
            //   left: '2%',
            //   right: '0%',
            //   bottom: '0%',
            //   containLabel: true
            // },
            // xAxis: [
            //   {
            //     type: 'value',
            //     splitLine: {
            //       show: false
            //     },
            //     axisTick: { show: false },
            //     axisLine: { show: false }
            //   }
            // ],
            // yAxis: [
            //   {
            //     type: 'category',
            //     axisTick: { show: false },
            //     axisLine: { show: false },
            //     splitLine: {
            //       show: false
            //     },
            //     data: ['攀钢长寿', '十七冶', '鞍钢总院', '阳煤总院', '西电医院', '成都五冶', '攀钢密地', '中铁西安', '十九冶', '中铁芜湖', '烟台海港', '邯郸岭北', '阳煤三院', '中铁华洲', '上海中冶']
            //   }
            // ],
            // series: [
            //   {
            //     name: '按设备数2班满员数',
            //     type: 'bar',
            //     stack: '总量',
            //     barWidth: 14,
            //     label: {
            //       show: true
            //     },
            //     emphasis: {
            //       focus: 'series'
            //     },
            //     data: [388, 208, 201, 192, 159, 149, 144, 142, 139, 138, 135, 133, 128, 101, 95]
            //   },
            //   {
            //     name: '溢/缺数',
            //     type: 'bar',
            //     stack: '总量',
            //     barWidth: 14,
            //     label: {
            //       show: true,
            //       // position: 'left',
            //       padding: [0, 2, 0, 2],
            //       textStyle: {
            //         fontSize: '10px'
            //       }
            //     },
            //     emphasis: {
            //       focus: 'series'
            //     },
            //     data: [38, '', '', '', -15, '', '', -22, '', '', '', '', '', -28, -95]
            //   }
            // ]
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 之前用作示例
    initSubDrugChart2() {
      // this.subDrugChart1 = {
      //   grid: {
      //     top: '0%',
      //     left: '6%',
      //     right: '6%',
      //     bottom: '0px'
      //   },
      //   barWidth: 35,
      //   xAxis: {
      //     type: 'category',
      //     axisTick: { show: false },
      //     splitLine: { show: false },
      //     axisLine: { show: false },
      //     boundaryGap: false,
      //     axisLabel: { // 文字垂直展示
      //       show: false,
      //       formatter: (v) => {
      //         return v.split('').join('\n')
      //       }
      //     },
      //     data: ['攀钢长寿', '十七冶', '鞍钢总院', '阳煤总院', '西电医院', '成都五冶', '攀钢密地', '中铁西安', '十九冶', '中铁芜湖', '烟台海港', '邯郸岭北', '阳煤三院', '中铁华洲', '上海中冶']
      //   },
      //   yAxis: {
      //     show: false
      //   },
      //   series: [{
      //     type: 'bar',
      //     data: ['242', '217', '213', '202', '185', '149', '142', '135', '134', '125', '107', '100', '97', '94', '73'],
      //     itemStyle: {
      //       normal: {
      //         color: '#FDD100',
      //         label: {
      //           show: true, // 开启显示
      //           // position: 'inside', // 数据显示在图形内中间
      //           inside: true,
      //           textStyle: { // 数值样式
      //             color: '#fff',
      //             fontSize: 15
      //           }
      //         }
      //       }
      //     }
      //   }]
      // }
      // this.subDrugChart2 = {
      //   grid: {
      //     left: '6%',
      //     right: '6%',
      //     top: '10%'
      //   },
      //   barWidth: 35,
      //   xAxis: {
      //     type: 'category',
      //     axisTick: { show: false },
      //     splitLine: { show: false },
      //     axisLine: { show: false },
      //     boundaryGap: false,
      //     axisLabel: { // 文字垂直展示
      //       show: true,
      //       formatter: (v) => {
      //         return v.split('').join('\n')
      //       }
      //     },
      //     data: ['攀钢长寿', '十七冶', '鞍钢总院', '阳煤总院', '西电医院', '成都五冶', '攀钢密地', '中铁西安', '十九冶', '中铁芜湖', '烟台海港', '邯郸岭北', '阳煤三院', '中铁华洲', '上海中冶']
      //   },
      //   yAxis: {
      //     show: false
      //   },
      //   series: [{
      //     type: 'bar',
      //     data: ['242', '217', '213', '202', '185', '149', '142', '135', '134', '125', '107', '100', '97', '94', '73'],
      //     itemStyle: {
      //       normal: {
      //         color: '#45B5FF',
      //         label: {
      //           show: true, // 开启显示
      //           // position: 'inside', // 数据显示在图形内中间
      //           inside: true,
      //           textStyle: { // 数值样式
      //             color: '#fff',
      //             fontSize: 15
      //           }
      //         }
      //       }
      //     }
      //   }]
      // }
    },
    // 昨日药品、耗材切换事件
    onCategoryChange(type) {
      this.radioSelect = type
      if (type === '耗材') this.initConsumableChart()
      else this.initDrugChart()
    },
    // 药品耗材二级页面按纽（分类、趋势切换）
    onSortTrendChange(type) {
      this.sortSelect = type
    },
    // 药品、耗材二级图表展示  （模态框）
    openDrugModal() {
      this.showDrugModal = !this.showDrugModal
      this.initSubDrugChart()
      // 二级页面默认加载药品数据
      this.initDrug()
    },
    // 右侧时间点事件，点击药品、耗材根据月，季，年查询
    timeLineClick(tab, event) {
      this.activeName = tab.name
      this.$refs.subChart.initCharts()
      // 二级页面默认加载药品数据
      this.initDrug()
    },
    handleClose(down) {
      // console.log(down)
      this.showDrugModal = !this.showDrugModal
    },
    handleClose1() {
      this.showImg1Modal = !this.showImg1Modal
    },
    handleClose2() {
      this.showImg2Modal = !this.showImg2Modal
    },
    handleClose3() {
      this.showImg3Modal = !this.showImg3Modal
    },
    handleClose4() {
      this.showImg4Modal = !this.showImg4Modal
    },
    // 二级页面默认加载药品api(月)
    initDrug() {
      let url = '/api/hq/dashboard/type/medicine/total/dose'
      if (this.activeName === 'month') url += '?totalType=0'
      else if (this.activeName === 'quarterly') url += '?totalType=1'
      else url += '?totalType=2'
      axios
        .get(url)
        .then((res) => {
          this.initSubDrugChart(res)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 二级页面默认加载耗材api(月)
    initConsumables() {
      let url = '/api/hq/dashboard/all/material/total/sumqty'
      if (this.activeName === 'month') url += '?totalType=0'
      else if (this.activeName === 'quarterly') url += '?totalType=1'
      else url += '?totalType=2'
      axios
        .get(url)
        .then((res) => {
          this.initConsumablesChart(res)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 昨日新增，嫁出数临时弹出图片
    showImg() {
      this.showImg1Modal = !this.showImg1Modal
    },
    showSj() {
      this.showImg2Modal = !this.showImg2Modal
    },
    showSr() {
      this.showImg3Modal = !this.showImg3Modal
    },
    shwDeviceNum() {
      this.showImg4Modal = !this.showImg4Modal
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initMap()
    this.initAddQuitCount()
    this.initTXChart()
    this.initKtvChart()
    this.initPieChart()
    this.initDrugChart()
    this.initDeviceNum()
    this.initProtopathy()
    this.initOnBoardNum()
    this.initTotalIncome()
    this.initMachineChart()
    this.initPatientTotalChart()
    this.initDialysisFrequency()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
.el-container {
  position: relative;
  .float-charts {
    position: absolute;
    left: 200px;
    top: 0px;
    height: 100%;
    width: 532px;
    z-index: 102;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .protopathy-chart-wrapper {
      width: 400px;
      // height: 300px;
      flex: 1;
    }
  }
  .left-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 101;
    background: transparent;
    box-sizing: border-box;
    > .el-card {
      &:first-child {
        height: 250px;
      }
      &:nth-child(2) {
        height: 270px;
      }
      &:last-child {
        // width: 100%;
        height: 300px;
      }
    }
    .left-con {
      display: flex;
      .left-1 {
        width: 160px;
      }
      .left-2 {
        flex: 1;
      }
    }
    // .dialysisFrequency-chart-wrapper {
    //   width: 100%;
    //   height: 220px;
    // }
    .txstyle-chart-wrapper {
      // margin-top: 40px;
      height: 290px;
    }
    .zbstyle-chart-wrapper {
      display: flex;
    }
  }
  .header-wrapper {
    padding-left: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .content {
    span {
      display: inline-block;
      margin: 0 4px;
      padding: 0 8px;
      color: #fff;
      font-weight: bold;
      font-size: 40px;
      background: #4291e2;
      border-radius: 5px;
      &:first-child {
        margin-left: 0;
      }
    }
  }
  .el-main {
    padding: 0;
    // 中心患者数
    .patient-wrapper {
      position: absolute;
      right: 328px;
      top: 350px;
      // bottom: 0px;
      width: 280px;
      .patient-chart-wrapper {
        width: inherit;
        height: 100%;
      }
    }
  }
  .right-wrapper {
    // width: 100%;
    // height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .machine-chart-wrapper,
    .income-chart-wrapper {
      height: 220px;
    }
    > .el-card {
      flex: 1;
      &:last-child {
        height: 240px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
    }

    .title-wrapper {
      height: 22px !important;
      padding: 0 0 0 5px !important;
      border: none !important;
    }

    .title-wrapper {
      padding: 0 20px;
      display: flex;
      align-items: center;
      height: 60px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      .radio-wrapper {
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
  .sub-chart-wrapper {
    width: 100%;
    height: 600px;
    box-sizing: border-box;
    .drug,
    .consumables {
      height: 300px;
    }
    .drug {
      border-bottom: 1px solid #fdd100;
    }
    .consumables {
      display: flex;
      > div {
        flex: 1;
      }
    }
  }
  .bottom-charts {
    position: absolute;
    background: transparent;
    bottom: 5px;
    left: 36%;
    display: flex;
    .title-wrapper {
      text-align: center;
    }
    .el-card {
      &:nth-child(2) {
        margin-left: 20px;
      }
    }
  }
}
// 药品，耗材二级页面
.chart-header {
  width: 100%;
  display: flex;
  .title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }
  .header-left {
    width: 240px;
    display: flex;
    align-items: center;
    .radio-wrapper {
      margin-left: 20px;
    }
  }
  .header-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    .el-tabs {
      width: 166px;
      margin-right: 40px;
    }
  }
}
::v-deep .el-dialog__body {
  padding: 5px 30px 30px 30px;
}
::v-deep .el-tabs__header {
  margin: 0;
}
::v-deep .el-tabs__content {
  display: none;
}
::v-deep .el-card {
  background: transparent;
}

::v-deep .el-tabs__nav-wrap {
  &:after {
    width: 162px;
    background: transparent;
  }
}
.chart-title {
  font-size: 16px;
  color: #666;
  font-weight: 600;
  height: 40px;
  line-height: 40px;
}
</style>
